<!DOCTYPE html>
<html>
    <head>
        <title>Wireframe</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: #426AA1;
            }
        </style>                          

        <script src="../../../../lib/core/ht.js"></script>  
        
        <script>
            
            ht.Default.setImage('ben', '');
            
            function init() {
                dataModel = new ht.DataModel();

                g3d = new ht.graph3d.Graph3dView(dataModel);
                g3d.setGridVisible(true);
                g3d.setGridColor('#74AADA');
                g3d.setGridSize(100);
                g3d.setEye(0, 800, 2000);
                g3d.setFar(20000);

                view = g3d.getView();
                view.className = 'main';
                document.body.appendChild(view);
                window.addEventListener('resize', function(e) {
                    g3d.invalidate();
                }, false);

                ht.Default.setBatchInfo('shapeBatch', {                    
                    reverseCull: true, 
                    transparent: true,
                    opacity: 0.5,
                    image: 'ben',
                    uvScale: [6, 2]
                });                                                                
                ht.Default.setBatchInfo('imageBatch', {
                    reverseCull: true, 
                    transparent: true,
                    opacity: 0.5,
                    image: 'ben'                                     
                });
                ht.Default.setBatchInfo('colorBatch', {
                    reverseCull: true, 
                    transparent: true,
                    opacity: 0.5                                     
                });                

                var colors = ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970',
                                '#f28f43', '#77a1e5', '#c42525', '#a6c96a']; 

                var column = 30,
                    row = 30,
                    gap = 100,
                    startX = -column * gap / 2 + gap / 2,
                    startZ = row * gap / 2 - gap / 2,
                    size = gap * 0.55;

                for (var i = 0; i < row; i++) {
                    for (var j = 0; j < column; j++) {
                        var color = i < colors.length ? colors[i] : null;
                        createNode(startX + gap * j, -startZ, size).s({
                            'batch': color ? 'colorBatch' : 'imageBatch',
                            'all.color': color,
                            'wf.color': color,
                            'wf.visible': true
                        });
                    }
                    startZ -= gap;
                }

                var types = ['box', 'sphere', 'cylinder', 'cone', 'torus', 'star', 'rect', 'roundRect',
                    'triangle', 'rightTriangle', 'parallelogram', 'trapezoid'];
                for(var i=0; i<types.length; i++){                     
                    var node = createNode(-types.length*gap+gap+gap*i*2, 0, gap*1.5);
                    node.s({
                        'batch': 'shapeBatch',
                        'shape3d': types[i],
                        'wf.visible': true
                    });
                    node.setElevation(gap * 2);
                };
            }

            function createNode(x, z, size) {
                var node = new ht.Node();
                node.s3(size, size, size);
                node.p3(x, size / 2, z);
                dataModel.add(node);
                return node;
            }

        </script>
    </head>
    <body onload="init();">                                  
    </body>
</html>